<template>
  <div>
    <!-- 
      v-for指令: 
      作用：渲染列表，所有的标签结构，按照数量循环生成
      语法：
        v-for="(值变量，索引变量) in 目标结构"
        v-for="值变量 in 目标结构"

      目标结构：数组/对象/数字/字符串
      值变量：指的是目标结构中的数据（值变量名字可自定义）
      索引变量：指的是目标结构中数据对应的下标值(索引值，索引变量名字同样可以自定义)
     -->
    <!-- 
      案例：循环渲染学生列表

      当使用v-for且不添加key属性的时候，编辑器上会报红，因为vue建议我们使用v-for的时候添加上key属性
      因此很多vue插件就制定了规则，只要我们写v-for没有添加key属性就会报红

     -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} --- {{ index }}
      </li>
    </ul>
    <!-- 
      循环渲染数组对象
     -->
    <ul>
      <li v-for="item in arrObj" :key="item.name">
        {{ item.name }} -- {{ item.age }} --- {{ item.gender }}
      </li>
    </ul>
    <!-- 
      循环对象
       v-for="(item, key, index) in obj"
       item: 获取到的就是键值
       key: 获取到的是键名
       index: 键名(键值)对应下标值
     -->
    <div>
      <p v-for="(item, key, index) in obj" :key="key">
        {{ item }} -- {{ key }} -- {{ index }}
      </p>
    </div>
    <!-- 

      循环数字: 从1开始的
     -->
    <div>
      <p v-for="item in 10">{{ item }}</p>
    </div>
    <!-- 
      循环字符串
     -->
    <ul>
      <li v-for="(item, index) in 'arr'" :key="index">{{ item }}</li>
    </ul>
    <!-- 
      注意：v-for的临时变量不能用在v-for范围外
     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小芳", "小敏", "小凡"],
      arrObj: [
        {
          name: "小明",
          age: 12,
          gender: "男",
        },
        {
          name: "小芳",
          age: 18,
          gender: "女",
        },
      ],
      obj: {
        name: "小敏",
        age: 18,
        gender: "女",
      },
    };
  },
};
</script>

<style>
</style>